<template>
  <div>
    <h2>歌手列表</h2>
    <div>
      <ul>
        <li v-for="singer in singers" :key="singer.id">{{ singer.name }} - {{ singer.gender }} - {{ singer.birthDate }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      singers: [],
    };
  },
  methods: {
    loadSingers() {
      // 发起请求获取歌手列表
      axios.get('/api/singers/list')
        .then((response) => {
          this.singers = response.data;
        })
        .catch((error) => {
          console.error('获取歌手列表失败: ', error);
        });
    },
  },
  created() {
    // 在页面创建时加载歌手列表
    this.loadSingers();
  },
};
</script>
